<template>
	<view class="container">
		<view class="navbar">
			<image src="../../static/logo.png" mode=""></image>
		</view>
		<view class="location flex">
			<image src="../../static/location.png" mode=""></image>
			<text class="size-30 ml-8">{{ district }}</text>
		</view>
		<view>
			<view class="main-banner">
				<view class="left pl-10">
					<view class="title">环保公益 你我同行</view>
					<view class="btn-1 flex-center">
						<navigator url="../placeOrder/placeOrder" open-type="switchTab">
							<image src="../../static/home-btn.png" mode=""></image>
						</navigator>
					</view>
				</view>
			</view>
			<!-- 积分兑换 -->
			<view class="adver" @click="goShop">
				<view class="product-box">
					<view class="title-box">
						<view class="title">
							兑换商城
						</view>
						<view class="subtit">
							积分当钱花·好礼兑不停
						</view>
						<view class="cbtn">
							立即兑换
							<uni-icons type="forward" size="11" color="#FFFFFF"></uni-icons>
						</view>
					</view>
					<view class="product">
						<image src="https://img.quanminyanxuan.com/other/0c90261de0784773b7b3eba195d10a64.jpg"
							mode="widthFix"></image>
					</view>
					<view class="product">
						<image src="https://img.quanminyanxuan.com/other/34ec23a48ab842edb2ce025235f70a82.jpg"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="tips">
					<uni-notice-bar showIcon scrollable single color="#959595" :speed="50"
						background-color="rgba(255, 255, 255, 0)" size="11">
						<view>您有<text style='color:#3bb061;font-weight: bold;'>{{ userInfo.emission || 0 }}</text>积分即将过期，为避免失效，请尽快使用。</view>
					</uni-notice-bar>
				</view>
			</view>
			<swiper class="swiper" :autoplay="true" :vertical="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in noticeList" :key="item.id">
					<view class="swiper-item">
						<view class="title">接单大厅</view>
						<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
						<view class="size-18">{{ item.nickname }}</view>
						<view class="size-18">预约上门回收成功</view>
					</view>
				</swiper-item>
			</swiper>

			<view class="menu">
				<view class="item" v-for="item in menuList" :key="item.id" @click="routerPush(item.url, item.id)">
					<image :src="item.icon" mode=""></image>
					<view class="title">{{ item.title }}</view>
				</view>
			</view>

			<view class="banner mt-40 px-30">
				<u-swiper @click="goDetail" height="200rpx" keyName="bannerimage" indicator circular
					:list="bannerList"></u-swiper>
			</view>
			<view class="tools">
				<view class="title">更多应用</view>
				<view class="flex-between mt-20">
					<view class="card" @click="makePhone">
						<view>
							<view class="title-1">热线电话</view>
							<view class="text">专业客服解答</view>
						</view>
						<image src="../../static/dianhua-2.png" mode=""></image>
					</view>
					<view class="card" @click="routerPush('../recruit/recruit')">
						<view>
							<view class="title-1">入驻招募</view>
							<view class="text">回收站回收员入驻</view>
						</view>
						<image src="../../static/zhaomu.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<orderStatus :show="show" @closePopup="closePopup"></orderStatus>
	</view>
</template>

<script>
	var QQMapWX = require('../../common/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	import orderStatus from '../../components/onTakeOrder/onTakeOrder.vue';
	export default {
		components: {
			orderStatus
		},
		data() {
			return {
				show: false,
				district: '运城',
				bannerList: [], //轮播图
				kehuMobile: '',
				menuList: [{
						id: 1,
						title: '上门回收价',
						desc: '可查看详细回收价格',
						icon: require('../../static/menu-1.png'),
						icon1: require('../../static/home_img_gx@2x.png'),
						url: '../guidePrice/guidePrice'
					},
					{
						id: 2,
						title: '接单大厅',
						desc: '快速接单 高效执行',
						icon: require('../../static/menu-2.png'),
						url: '../takeOrders/takeOrders'
					},
					{
						id: 3,
						title: '社区服务站',
						desc: '附近废品到站价',
						icon: require('../../static/menu-3.png'),
						url: '../recycleBin/recycleBin'
					},
					{
						id: 4,
						title: '爱心积攒',
						desc: '献爱心 得好物',
						icon: '../../static/menu-4.png',
						url: '../donate/donate'
					}
				],
				noticeList: [],
				userInfo: ''
			};
		},
		onShareAppMessage() {},
		onShareTimeline() {},
		onShow() {
			this.$api
				.orderov({
					openid: uni.getStorageSync('openid')
				})
				.then(res => {
					if (res.code == 1) {
						if (res.data.status == 1) {
							this.show = true;
						}
					}
				});
			this.userInfo = uni.getStorageSync('userInfo');
		},
		onLoad() {
			this.baseUrl = this.$tools.baseUrl;
			// 实例化API核心类
			qqmapsdk = new QQMapWX({
				key: '3SHBZ-L37KD-YBY4H-PJHZY-KW5BF-NLB3U'
			});
			this.getIndex();
			this.getLocation();
			this.getNoticeList();
		},
		methods: {
			getNoticeList() {
				this.$api.newOrder().then(res => {
					this.noticeList = res.data;
				});
			},
			makePhone() {
				uni.makePhoneCall({
					mobile: this.kefuphone
				});
			},
			closePopup() {
				this.show = false;
			},
			goDetail(e) {
				let url = this.bannerList[e].linkurl;
				uni.navigateTo({
					url,
					fail: () => {
						uni.switchTab({
							url
						});
					}
				});
			},
			goShop() {
				uni.switchTab({
					url: "/pages/shop/index"
				})
			},
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						const latitude = res.latitude;
						const longitude = res.longitude;
						this.latitude = latitude;
						this.longitude = longitude;
						console.log(res);
						qqmapsdk.reverseGeocoder({
							location: {
								latitude,
								longitude
							},
							success: res => {
								uni.setStorageSync('district', res.result.ad_info.district);
								this.district = res.result.ad_info.district;
								if (!this.userInfo.district) {
									this.$api
										.saveAddress({
											openid: uni.getStorageSync('openid'),
											province: res.result.ad_info.province,
											city: res.result.ad_info.city,
											district: res.result.ad_info.district
										})
										.then(res => {
											if (res.code == 1) {
												this.getUserInfo();
											}
										});
								}
							},
							fail: err => {
								console.log(err);
							}
						});
					}
				});
			},
			getUserInfo() {
				this.$api
					.getUserInfo({
						openid: uni.getStorageSync('openid')
					})
					.then(res => {
						uni.setStorageSync('userInfo', this.userInfo);
					});
			},
			// 获取首页新消息
			getIndex() {
				this.$api.index().then(res => {
					console.log(res);
					this.bannerList = res.data.banner;
					this.bannerList.forEach((item, i) => {
						this.bannerList[i].bannerimage = this.$tools.baseUrl + item.bannerimage;
					});
					this.kefuphone = res.data.config.basicKefuPhone;
				});
			},
			routerPush(url, id) {
				uni.navigateTo({
					url
				});
			}
		}
	};
</script>

<style lang="scss">
	.container {
		background: url("@/static/home_img_bg@2x.png") no-repeat;
		background-size: 100% auto;
		overflow-x: hidden;

		.navbar {
			font-size: 34upx;
			font-weight: 500;
			color: #ffffff;
			padding: 20upx 30upx;
			padding-top: calc(var(--status-bar-height) + 50upx);

			image {
				width: 250upx;
				height: 64upx;
			}
		}

		.location {
			padding-left: 30upx;
			color:#ffffff;
			image {
				width: 58upx;
				height: 66upx;
			}
		}

		.main-banner {
			display: flex;
			justify-content: center;

			.left {
				padding-top: 30upx;
				flex: 1;
				text-align: center;

				.title {
					font-size: 58upx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.text-1 {
					image {
						width: 36upx;
						height: 36upx;
					}
				}

				.text-2 {
					font-size: 26upx;
					font-weight: 400;
					color: #ffffff;
				}

				.btn-1 {
					width: 270upx;
					height: 82upx;
					line-height: 82upx;
					margin: 50upx auto;

					image {
						width: 270upx;
						height: 82upx;
					}
				}
			}

			.right {
				min-width: 360upx;
				position: relative;

				.ball {
					min-width: 360upx;
					min-height: 360upx;
					width: 360upx;
					height: 360upx;
					animation: turn 10s linear infinite;
				}

				.hand {
					position: absolute;
					width: 380upx;
					height: 200upx;
					bottom: 4upx;
					left: -6px;
				}
			}

			@keyframes turn {
				0% {
					-webkit-transform: rotate(0deg);
				}

				25% {
					-webkit-transform: rotate(90deg);
				}

				50% {
					-webkit-transform: rotate(180deg);
				}

				75% {
					-webkit-transform: rotate(270deg);
				}

				100% {
					-webkit-transform: rotate(360deg);
				}
			}
		}
		
		.adver {
			margin: 0upx 30upx 30upx 30upx;
			border-radius: 16upx;
			padding: 32upx;
			background: rgba(255, 255, 255, .7);
			box-shadow: 0 -2px 8px 0 rgba(0, 0, 0, .1);
			box-sizing: border-box;
		
			.product-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
		
				.title-box {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
		
					.title {
						font-size: 34upx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 10rpx;
					}
		
					.subtit {
						font-size: $uni-font-size-sm;
						color: $theme-color;
						margin-bottom: 30rpx;
					}
		
					.cbtn {
						display: flex;
						align-items: center;
						padding: 10rpx 30rpx;
						background:  $theme-color;
						color: #fff;
						border-radius: 30rpx;
					}
				}
		
				.product {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					overflow: hidden;
					border: 1px solid #eeeeee;
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		
			.tips {
				padding-top: 15rpx;
				border-top: 1rpx #fff solid;
				margin-top: 30rpx;
			}
		}
		.menu {
			margin-top: 40upx;
			@include menu-list(4);
			background: #f8f8f8;

			.item {
				image {
					width: 96upx;
					height: 107upx;
				}

				.title {
					font-size: 28upx;
					font-weight: 400;
					color: #333333;
				}
			}
		}

		.tools {
			border-radius: 16upx;
			padding: 30upx 30upx 20upx;
			background: #f8f8f8;

			.title {
				font-size: 36upx;
				font-weight: 500;
				color: #222222;
			}

			.card {
				width: 335upx;
				height: 160upx;
				background-image: linear-gradient(90deg, #fff, #f7fff3, #fff);
				padding: 20upx;
				box-sizing: border-box;
				@include flex-between;

				.title-1 {
					font-size: 36upx;
					font-weight: bold;
					color: #333333;
				}

				.text {
					font-size: 24upx;
					color: #AAAAAA;
					letter-spacing: 2upx;
					margin-top: 10upx;
				}

				image {
					width: 75upx;
					height: 75upx;
				}
			}
		}
	}

	.swiper {
		height: 42upx;
		padding: 20upx;
		background: #fff;
		margin: 30upx;

		.swiper-item {
			display: flex;
			align-items: center;

			.title {
				font-size: 26upx;
				color: #111;
				margin-right: 20upx;
			}

			.avatar {
				position: relative !important;
				right: 0 !important;
				top: 0 !important;
				width: 42upx !important;
				height: 42upx !important;
				margin-top: 0 !important;
				border-radius: 20upx;
			}

			.size-18 {
				color: #02c99a;
				margin-left: 10upx;
				margin-top: 0 !important;
				font-size: 26upx;
				color: #999999;
			}
		}
	}
</style>